<template>
  <el-pagination
      @current-change="currentChange"
      @size-change="sizeChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      :layout="layout"
      :total="total"
      :pager-count="pagerCount"
      :background="background"
  >
  </el-pagination>
</template>

<script>
/**
 * 使用方式:
 * 捕捉currentChange事件,获得参数中有当前页与每页条数
 * 传入总条数total
 * 如:
 <ElPagination
 @currentChange="currentChange"
 :total="total"
 />
 */
export default {
  props: {
    /**
     * 每页条数
     */
    pageSize: {
      type: Number,
      default: 10
    },
    /**
     * 总条目数
     */
    total: {
      type: Number,
      default: 100
    },
    /**
     * 最大显示页码数量 只能为  大于等于 5 且小于等于 21 的奇数
     */
    pagerCount: {
      type: Number,
      default: 9
    },
    resetFlag: {
      type: Boolean,
      default: false
    },
    background:{
      type: Boolean,
      default: false
    },
    layout:{
      type:String,
      default:"total, sizes, prev, pager, next, jumper"
    }
  },
  watch: {
    resetFlag: function () {
      this.currentPage = 1;
    }
  },
  data() {
    return {
      currentPage: 1,
      currentSize: 10
    }
  },
  methods: {
    /**
     * 翻页时抛出翻页事件  传递参数
     */
    currentChange: function (current) {
      let params = {
        currentPage: current,
        pageSize: this.currentSize
      }
      this.$emit("currentChange", params)

      this.currentPage = current
    },
    /**
     * 每页条数发生变化
     */
    sizeChange: function (current) {
      let params = {
        currentPage: this.currentPage,
        pageSize: current
      }
      this.$emit("currentChange", params)
      this.currentSize = current
    }
  }
}
</script>

<style>

</style>